<template>
  <div class="content">
    <ul>
      <li class="lI" v-for="(item,index) in this.$store.state.toNotice" :key="index">
        <!-- <el-avatar class="imgHeader" :size="48" src="https://empty" @error="errorHandler"> -->
        <svg class="icon">
          <!--  cx: 中心点的x轴的坐标，cy: 中心点的y轴坐标，r为圆的半径，fill为圆的背景色 -->
          <circle cx="0.2rem" cy="0.2rem" r="0.2rem" fill="#eeeeee" />
        </svg>
        <!-- </el-avatar> -->
        <i size="large" :class="item.noticeClass" class="iconNotice" />
        <div class="ditel">
          <p class="name">{{item.noticeName}}</p>
          <b>{{!item.isNew ? '有最新'+item.noticeName+'快来看看!'  : '暂无新'+item.noticeName+'发布'}}</b>
        </div>

        <i size="large" class="el-icon-arrow-right"></i>
        <span></span>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  data () {
    return {
      
    }
  }

}
</script>>

<style lang="scss" scoped>
.content {
  ul {
    height: 100%;
    li {
      height: 0.6rem;
      position: relative;
      display: flex;
      padding-top: 0.06rem;
      box-sizing: border-box;
      position: relative;
      .icon {
        width: 0.48rem;
        height: 0.44rem;
      }
      .iconNotice {
        position: absolute;
        top: 14px;
        left: 8px;
        font-size: 24px;
        font-weight: 600;
        // color: linear-gradient(-90deg, #848AFF 0%, #B67BFF 100%);
        background: -webkit-gradient(
          linear,
          left top,
          right top,
          from(#848AFF),
          to(#B67BFF )
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .ditel {
        margin-left: 0.07rem;
        width: 3.14rem;
        p {
          font-size: 0.16rem;
          line-height: 0.2rem;
          color: #666666;
          text-align: left;
          font-weight: 600;
          font-family: PingFang-SC-Medium;
        }
        b {
          font-size: 0.12rem;
          color: #666666;
          font-weight: 500;
          font-family: PingFang-SC-Light;
        }
      }

      .time {
        float: right;
        text-align: right;
        font-size: 0.12rem;
        width: 1.3585rem;
        background-color: #fff;
      }
    }
    .el-icon-arrow-right:before {
      line-height: 40px;
      font-size: 18px;
      color: #999;
    }
    span {
      background-color: #999;
      width: 2.85rem;
      height: 0.01rem;
      display: inline-block;
      position: absolute;
      bottom: 0;
      left: 0.5rem;
    }
  }
}
</style>